<!-- 金额输入框 -->
<template>
  <view class="w-100">
    <u--input
      :disabled="disabled"
      :placeholder="placeholder"
      :placeholderClass="placeholderClass"
      :placeholderStyle="placeholderStyle"
      :inputAlign="inputAlign"
      :fontSize="fontSize"
      :color="color"
      :prefixIcon="prefixIcon"
      :prefixIconStyle="prefixIconStyle"
      :suffixIcon="suffixIcon"
      :suffixIconStyle="suffixIconStyle"
      :border="border"
      :shape="shape"
      :customStyle="customStyle"
      v-model="title"
      type="number"
      @change="change"
      @blur="handleBlur"
      @focus="onFocus"
    ></u--input>
  </view>
</template>

<script>
export default {
  name: 'HMoneyInput',
  data() {
    return {
      title: '', // 选中的标题名称
      focus: false, // 是否有焦点
    }
  },
  model: {
    prop: 'value',
    event: 'change',
  },
  props: {
    min: {
      type: [String, Number],
      default: 0,
    },
    max: {
      type: [String, Number],
      default: 99999999,
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false,
    },
    // 选中的值
    value: {
      type: [String, Number],
      default: '',
    },

    // 是否可以输入负值 - 默认不可输入负值
    isMinus: {
      type: Boolean,
      default: true,
    },
    // 输入框为空时的占位符
    placeholder: {
      type: [String, Number],
      default: '请输入',
    },
    // 指定placeholder的样式类，注意页面或组件的style中写了scoped时，需要在类名前写/deep/
    placeholderClass: {
      type: [String],
      default: '',
    },
    // 指定placeholder的样式，字符串/对象形式，如"color: red;"
    placeholderStyle: {
      type: [String, Object],
      default: 'color: #C0C4CC'
    },
    // 输入框内容对齐方式 - left | center | right
    inputAlign: {
      type: [String],
      default: 'left',
    },
    // 输入框字体的大小
    fontSize: {
      type: [String, Number],
      default: '15px',
    },
    // 输入框字体颜色
    color: {
      type: [String],
      default: '#303133',
    },
    // 输入框前置图标
    prefixIcon: {
      type: [String],
      default: '',
    },
    // 前置图标样式，对象或字符串
    prefixIconStyle: {
      type: [String, Object],
      default: '',
    },
    // 输入框前置图标
    suffixIcon: {
      type: [String],
      default: '',
    },
    // 前置图标样式，对象或字符串
    suffixIconStyle: {
      type: [String, Object],
      default: '',
    },
    // 边框类型，surround-四周边框，bottom-底部边框，none-无边框
    border: {
      type: [String],
      default: 'surround',
    },
    // 输入框形状，circle-圆形，square-方形
    shape: {
      type: [String],
      default: 'square',
    },
    customStyle: {
      type: [Object],
      default: () => {},
    },
  },
  watch: {
    // 监听value是否有值
    value: {
      handler(val, oldVal) {
				this.title = val
        if (!this.focus && val !== '') {
          this.blur()
        } 
      },
      immediate: true,
    },
  },
  onLoad() {},
  methods: {
    handleBlur(val) {
      this.$emit('blur', val)
      this.blur()
    },
    change(value) {
      this.$emit('change', value)
			if (this.focus) {
				this.$emit('input', value)
			}
    },
    blur() {
      var val = ''
      if (this.title === '' || this.title === null) return false
			if (this.max !== null || this.max !== undefined || this.max !== '') {
			  if (Number(this.title) >= this.max) {
			    this.title = this.max
			  }
			}
			if (this.min !== null || this.min !== undefined || this.min !== '') {
			  if (Number(this.title) <= this.min) {
			    this.title = this.min
			  }
			}
      if (this.isMinus) {
        if (Number(this.title) <= 0) {
          this.title = 0
        }
      } else {
        val = Number(this.title).toFixed(2)
        this.title = val
        this.$emit('change', val)
				if (this.focus) {
					this.$emit('input', val)
				}
				return
      }
      val = Number(this.title).toFixed(2)
      this.title = val
      this.$emit('change', val)
			if (this.focus) {
				this.$emit('input', val)
			}
			this.focus = false
    },
    onFocus() {
      this.focus = true
    },
  },
}
</script>

<style lang="scss" scoped>
</style>